<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2 id="h2"></h2>
    <div id="app">
        <input v-model="name" type="text" placeholder="姓名">
        <input v-model="age" type="text" placeholder="年龄">
        <input v-model="address" type="text" placeholder="地址">
        <input v-model="phoneNumber" type="text" placeholder="电话号码">
        <div>
            <ul>
                <li>姓名: {{name}}</li>
                <li>年龄: {{age}}</li>
                <li>地址: {{address}}</li>
                <li>
                    <p>
                        电话号码: {{phoneNumber}}
                    </p>
                </li>
            </ul>
        </div>
    </div>
</body>
<script>
/*    function MVVM(opations) {

    }*/
    class MVVM{
        constructor(opations){
            this.el = opations.el;
            this._data = opations.data;

            this.init()
        }
        init(){
            //数据代理
            this.initData();
//            this.initDOM();
        }
        initData(){
//            this == vm
            let me = this;
            for(let key in me._data){ //key == name
                if(!me._data.hasOwnProperty(key)) return;
                Object.defineProperty(me, key, { //key == name
                    configurable: false,
                    enumerable: true,
                    get(){
                        return me._data[key]
                    },
                    set(newValue){
                        me._data[key] = newValue;
                    }
                })
            }

        }
    }

//MVVM.prototype.xxx

    /*
    * 1.数据代理 -->响应式数据 Object.defineProperty
    * 2.input - 绑定事件keyup -> 事件处理相关函数 -> 改变数据
    * 3.获得相关的DOM元素  -> 数据 <=> 相应的DOM发生改变
    *
    * */
</script>
<script>
    let vm = new MVVM({
        el:"app",
        data:{
            name:"哈哈",
            age:"",
            address: "",
            phoneNumber: ""
        }
    })

    console.log(vm.name, vm)
    vm.age = 18
</script>
</html>